<!---vue鉴权
场景一：登录验证时，有一个用户名密码数组，然后根据当前用户输入的用户名和密码判断是否相同，相同登录成功，反之失败，
逻辑：先遍历数组，把输入的用户名和密码和数组里用户名和密码比对，先定一个失败的状态，
如果相同提示成功，并且修改状态为成功

问题：为什么forEach的this取不到vue data里的值？如何解决
因为js的函数会创建新的作用域
1.箭头函数箭头函数没有this引用，所以不会覆盖外面的this
2.先在外部定义原先this,

		{
      path: '/',
      name: 'homePage',//登录后，跳转到的页面
      component: homePage
    },
场景二：登录后，根据不同用户展示不同菜单？在homePage里写公共左侧导航组件？
后台提供：rules,代表不同权限看不同的内容
userArr:[
					{
						"username":"admin",
						"password":"123456",
						"rules":"/user/list,/task/list"
					},
					{
						"username":"admin1",
						"password":"123457",
						"rules":"/user/list"
					}
				],

需要做啥：先登录后，跳转页homePage,先写成功后，跳转到homePage的路由
先写公共左侧导航组件leftNav
第一写：父组件homePage向子组件leftNav传值？
模拟组件传值场景：homePage父组件有个input框，修改input框的值(比如写789)，子组件的id（也跟着变789），跟着变化，
方法：先在子组件写定义父组件需要传的值(id)，在子组件props里定义这个值eg：id,
在父组件中,引用子组件(先写标签leftNav，然后import,再去components定义)，在子组件对应标签里v-bind
-->
<template>
  <div>
	<aside style="width:180px;">
    <leftNav v-bind:id="homeInput" :menuData="menuData"></leftNav>
	</aside>
	<!-- 我是父组件里面的input框1：<input type="text" value="" v-model="homeInput"/> -->
  </div>
</template>

<script>
import leftNav from '@/components/common/leftNav'
  export default {
    data() {
      return {
		homeInput:'',
		menuData:'',//从login获取的menu信息
      }
    },
    methods: {
		getMenuInfo(){
			this.menuData=JSON.parse(localStorage.getItem("menuInfo"));
		}
    },
	created(){
		this.getMenuInfo();
	},
    components: {
      leftNav
    },
  }
</script>

<style>
.verify-pos {
	position: absolute;
	right: 100px;
	top: 0px;
}
.card-box {
	padding: 20px;
	/*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
	-webkit-border-radius: 5px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	background-clip: padding-box;
	margin-bottom: 20px;
	background-color: #F9FAFC;
	margin: 120px auto;
	width: 400px;
	border: 2px solid #8492A6;
}

.title {
	margin: 0px auto 40px auto;
	text-align: center;
	color: #505458;
}

.loginform {
	width: 350px;
	padding: 35px 35px 15px 35px;
}
</style>